31.3 KB · ⇊ 10 parts · ⤓ Micron 31.3 KB · ⤓ HTML 82.6 KB

top

mwcqScalable Vector Graphics (mwcgSVG) è un mwcwformato di file di mwdagrafica vettoriale mwdqbidimensionale basato sull'mwdgXML sviluppato da mwdwWorld Wide Web Consortium.cite-ref-eisenberg-2-0[2] Le immagini SVG possono essere incluse all'interno di una pagina mwfaHTMLcite-ref-eisenberg-2-1[2]. Possono essere inoltre distribuite in versione mwgqcompressa utilizzando l'algoritmo mwgggzip (con estensione svgz)cite-ref-3[3].

• Situazione

• Caratteristiche

• Utilizzo

• Grafica vettoriale scalabile

• Programmi per la creazione di svg

• HTML5

• Differenze tra SVG e Canvas

• Caratteri

• Collegamenti

• Scripting e animazione

• Dati Exif

• Immagini raster in SVG

• Uso dei CSS

• Browser che supportano il formato svg e svgz

• Note

• Bibliografia

• Voci correlate

• Altri progetti

• Collegamenti esterni

SVG è diventato una mwjgraccomandazione (standard) del mwjwWorld Wide Web Consortium nel settembre mwka2001 dopo un iter piuttosto contrastato. Al W3C mwkqMacromedia e mwkgMicrosoft avevano introdotto il linguaggio mwkwVML (Vector Markup Language), mentre mwlaAdobe e mwlqSun Microsystems proponevano un formato concorrente chiamato mwlgPGML: per arrivare alla raccomandazione è stato necessario un certo lavoro di compromesso. SVG è supportato nativamente dal mwlwweb browser/mwmaweb editor mwmqAmaya, da mwmgOpera e da mwmwMozilla Firefox dalla versione 1.5. Altri browser per visualizzare immagini SVG richiedono l'aggiunta di un mwnaplugin, come mwnqAdobe SVG Viewer o mwngCorel SVG Viewer.

Le immagini SVG possono essere visualizzate anche da editor e viewer autonomi. Una particolare versione di mwoaMozilla, chiamata "Croczilla", ora supporta alcune parti dello standard SVG, ma gran parte delle prestazioni non sono ancora ottenibili: in prospettiva comunque le immagini SVG dovrebbero essere visualizzabili senza l'aggiunta di alcun plug-in. Anche il web browser mwoqKonqueror del progetto mwogKDE attualmente possiede una implementazione di SVG abbastanza completa chiamata ksvg e c'è da aspettarsi che in futuro questo supporto sarà adattato al web browser mwowSafari della mwpaApple Inc. Il browser mwpqOpera supporta SVG dalla release 8.5.

I programmi scritti in mwpwJava possono controllare la visualizzazione, la generazione e la manipolazione di grafici SVG servendosi del mwqaBatik SVG Toolkit.

È possibile riassumere quanto contenuto nella mwrwmwsaOverview of SVG del consorzio W3C.

SVG permette di trattare tre tipi di oggetti grafici:

• mwtaforme geometriche, cioè linee costituite da segmenti di retta e curve e aree delimitate da linee chiuse;

• immagini della mwtggrafica raster e mwtwimmagini digitali;

• testi esplicativi, eventualmente cliccabili.

Gli oggetti grafici possono essere raggruppati in oggetti più comprensivi, muniti di attributi di stile e aggiunti ad oggetti grafici precedentemente costruiti e visualizzati. Un testo può far parte di un qualsiasi mwugnamespace XML sottoponibile ad una applicazione; questa possibilità consente di aumentare la ricercabilità e l'mwuwaccessibilità delle immagini SVG. Il repertorio delle operazioni attuabili include trasformazioni annidate, percorsi di mwvaclipping, mwvqmaschere alpha, effetti di mwvgfiltro, oggetti template ed estensibilità.

Le figure espresse mediante SVG possono essere dinamiche e interattive. Il mwwgDocument Object Model (DOM) per SVG, che include il completo XML DOM, consente una animazione in grafica vettoriale diretta ed efficiente attraverso i linguaggi mwwwECMAScript e mwxaSMIL. Agli oggetti grafici SVG si possono assegnare event handlers tratti da un ampio repertorio: due esempi dal ruolo facilmente intuibile sono mwxgonmouseover e mwxwonclick. Grazie alla compatibilità di SVG con gli altri standard per il web e grazie al mutuo supporto di questi meccanismi, si possono dotare gli elementi SVG e gli altri elementi XML di una mwyapagina web di prestazioni come lo mwyqscripting ricavate contemporaneamente da diversi mwygspazi di nomi.

Il sistema SVG rivaleggiava con mwzaAdobe Flash (dichiarato obsoleto dal 31 dicembre 2020cite-ref-4[4]) in termini di potenziale e di efficienza. Per un primo confronto si fa presente che, contrariamente a Flash, SVG è uno mwaqstandard aperto.

La maggior parte dei prodotti software per disegnare come mwcaAdobe Illustrator e mwcqCorel Draw nelle versioni più recenti sono in grado di esportare immagini descritte in SVG. Anche il pacchetto mwcgDraw della mwcwOpenOffice.org dalla versione 1.1 può esportare file SVG.

Due programmi di mwdqgrafica vettoriale mwdgopen source e multipiattaforma che usano in maniera nativa il formato SVG sono mwdwInkscape e mweaSodipodi.

Le potenzialità di una grafica vettoriale scalabile sono notevoli:

• la geometria di ciascun elemento grafico è definita matematicamente (in termini di vettori), anziché essere trattata mediante rigidi quadri di mwfqpixel;

• è possibile ridimensionare a piacere qualsiasi elemento grafico, mantenendone la qualità. Più in particolare, nel visualizzare un dato oggetto grafico su supporti di differente natura (mwfwstampa, mwgavideo, mwgqplotter, schermo di mwggcellulare ecc.), si è certi di ottenere sempre la massima qualità che quei supporti possono fornire.

Tali potenzialità interessano praticamente tutte le applicazioni grafiche che non siano puramente mwhamwhqraster, cioè basate su mappe di pixel (nella pratica immagini provenienti da fotocamere o da mwhgscansioni).

Di contro il "peso" computazionale di una immagine vettoriale è in genere superiore a quello della grafica raster, in quanto il processore del computer deve sostanzialmente rigenerare l'immagine ex novo ogni qual volta che si ridimensiona la visualizzazione.

Il vantaggio dell'SVG rispetto ad altri formati di grafica vettoriale consiste nella sua natura di standard aperto: in questo modo in linea di principio chiunque lo conosca è in grado di realizzare pagine SVG senza avere la necessità di un ambiente di sviluppo commerciale dedicato.

Trattandosi di un formato derivato dall'mwigXML, eredita da esso la facilità di generazione con mezzi automatici e tramite mwiwlinguaggi di programmazione.

Dal mwjqlato client è infine possibile operare sul modello ad oggetti del documento (il mwjgDOM) utilizzando codice ECMAScript (la standardizzazione di mwjwJavaScript definita da mwkaECMA).

Ecco una lista parziale di programmi per la generazione di file svg:

• mwlqAdobe Illustrator

• Affinity Designer (vedere mwmaSerif Europe Ltd.)

• Gravit Designer

• mwnaMacromedia FreeHand

• mwngCorel Draw

• mwoaXara Xtreme

• mwogInkscape (open source)

• iDraw

• Janvas Editor online

Con lo standard mwqwHTML5 il formato SVG è diventato parte del linguaggio HTML. Un svg si può inserire come immagine (formato ".svg") oppure tramite codice. Dal punto di vista dell'utente, a livello estetico è la stessa cosa. Le seguenti tre righe di codice danno come output lo stesso risultato a livello estetico (un cerchio bianco con bordo verde), ma con tre tecniche diverse:

SVG è un linguaggio per descrivere la grafica 2D in XMLcite-ref-5[5]. mwaugCanvas disegna grafica 2D, al volo (con JavaScript)cite-ref-6[6].

SVG è basato su XML, il che significa che ogni elemento è disponibile all'interno di SVG DOM. Si possono allegare gestori di eventi JavaScript per un elemento.

In SVG, ogni forma disegnata viene "ricordata" come un oggetto. Se gli attributi di un oggetto SVG vengono modificati, il browser può automaticamente rieseguire il rendering della forma.

Il mwavqCanvas (anch'esso un elemento HTML5) viene renderizzato pixel per pixel. Il Canvas, una volta disegnata la grafica, viene "dimenticato" dal browser. Se la sua posizione deve essere cambiata, l'intera scena deve essere ridisegnata, inclusi gli oggetti che potrebbero essere stati coperti dalla graficacite-ref-7[7].

Il Canvas è adatto per applicazioni dinamiche come giochi e animazioni, per via del suo caricamento più veloce e indipendente dal DOM.

Le immagini create in SVG sono aggiunte al mwavsDOM e modificabili tramite mwavwJavaScript e mwav0Css, anche con eventi presenti sugli altri elementi del documentocite-ref-8[8].

| Funzioni [ 9 ] | SVG | Canvas |

|---|---|---|

| Vettori | SI | NO |

| Rasterizzazione | NO | SI |

| Accesso DOM | SI | NO |

| Accessibilità | SI | Parziale |

| Testo | SI | SI |

| Gradienti e Patterns | SI | SI |

| CSS Animations | SI | NO |

| CSS Filters | SI | SI |

| SVG Filters | SI | SI |

| Inclusione video | NO | SI |

| Manipolazione Pixel | NO | SI |

| Accesso API in JS | NO | SI |

Come con HTML e CSS, il testo in SVG può fare riferimento a file di caratteri esterni, come i caratteri di sistema. Se i file dei font richiesti non esistono sulla macchina in cui viene eseguito il rendering del file SVG, il testo potrebbe non apparire come previsto. Per superare questa limitazione, il testo può essere visualizzato in un mwaz4font SVG , dove i glifi richiesti sono definiti in SVG come un font che viene quindi descritto dall'elementomwaz8<text>cite-ref-10[10].

Su lato mwaauSEO gli SVG sono più accessibili perché supportano il testocite-ref-11[11] che, a meno che non venga convertito in tracciati, è selezionabile dall'utente in una pagina HTML e leggibile dai motori di ricercacite-ref-12[12].

Le immagini SVG possono contenere collegamenti ipertestuali ad altri documenti, utilizzando XLink. Attraverso l'uso dell'elementomwaba<view>o di un identificatore di frammento, gli URL possono collegarsi a file SVG che modificano l'area visibile del documento. Ciò consente di creare stati di visualizzazione specifici che vengono utilizzati per ingrandire/ridurre un'area specifica o per limitare la visualizzazione a un elemento specifico. Questo è utile quando si creano mwabesprite. Il supporto XLink in combinazione con l'elemento mwabi<use> consente anche il collegamento e il riutilizzo di elementi interni ed esterni. Ciò consente ai programmatori di fare di più con meno markup e rende il codice più pulitocite-ref-13[13].

Prima dell'arrivo di HTML5, l'uso di mwabkAdobe Flash (obsoleto dal 31 dicembre 2020) era l'unico modo per creare animazioni vettoriali e, in generale, immagini vettoriali per il webcite-ref-14[14].

I disegni SVG possono essere dinamici e interattivi. Le modifiche basate sull'animazione possono essere descritte in SMIL o possono essere programmate in un linguaggio di scripting (ad esempio ECMAScript o JavaScript). Il W3C raccomanda esplicitamente SMIL come standard per l'animazione in SVG.

SVG può essere animato anche con i CSS3cite-ref-15[15] ed mwacqECMAScript.

Un ricco set di gestori di eventi come " mwacyonmouseover" e " mwacconclick" può essere assegnato a qualsiasi oggetto grafico SVG per applicare azioni ed eventicite-ref-16[16].

In SVG è possibile inserire metadati mwaqgExifcite-ref-17[17].

Nel codice svg si possono incorporare o collegare immagini raster (o bitmap) come jpg, png o gif.

Immagine collegata:

Immagine incorporata:

È possibile utilizzare i CSS per modificare gli stili di SVG. Esempio:

Ecco una lista di browser che almeno dall'ultima versione disponibile supportano, almeno in parte, il formato svg e svgz (svg compresso);

• mwaxgAmaya

• mwaxoBrave

• mwaxwCamino

• mwax4Gecko

• mwayaGoogle Chrome

• mwayiFlock

• mwayqInternet Explorer (dalla versione 9 in poi)

• mwayyEdge

• mwaygKonqueror (fu il primo browser a dare supporto al formato svg)

• mwayoMozilla Firefox

• mwaywOpera

• mway4SeaMonkey

• mwazaSafari

Il supporto per tale formato è in continua evoluzione e con il susseguirsi di nuove versioni dei nuovi browser la compatibilità si amplia continuamente.

cite-note-11. mwazg(mwazkmwazoEN) mwazsmwazwScalable Vector Graphics (SVG) 1.1 (Second Edition), su mwaz0w3.org, 16 agosto 2011.

cite-note-eisenberg-22. ↑ mwa0mmwa0qEisenberg.

cite-note-33. ↑ mwa0g(mwa0kmwa0oEN) mwa0smwa0wSaving compressed SVG (SVGZ), su mwa00adobe.com mwa04(archiviato dall'mwa08url originale il 1º giugno 2010).

cite-note-44. ↑ mwa1mmwa1qmwa1uFlash & The Future of Interactive Content | Adobe Blog, su mwa1ytheblog.adobe.com. mwa1cURL consultato il 19 gennaio 2021 mwa1g(archiviato dall'mwa1kurl originale il 2 dicembre 2017).

cite-note-55. ↑ mwa10mwa14mwa18- SVG: Scalable Vector Graphics | MDN, su mwa2adeveloper.mozilla.org. mwa2eURL consultato il 19 gennaio 2021.

cite-note-66. ↑ mwa2umwa2ymwa2cAdding vector graphics to the Web - Learn web development | MDN, su mwa2gdeveloper.mozilla.org. mwa2kURL consultato il 19 gennaio 2021.

cite-note-77. ↑ mwa20mwa24mwa28HTML SVG, su mwa3aw3schools.com. mwa3eURL consultato il 19 gennaio 2021.

cite-note-88. ↑ mwa3umwa3ymwa3cSVG o Canvas per il tuo HTML5?, su mwa3gWellnet, 9 maggio 2014. mwa3kURL consultato il 19 gennaio 2021.

cite-note-92. mwa30(mwa34mwa38EN) mwa4amwa4eWhen to Use SVG vs. When to Use Canvas, su mwa4iCSS-Tricks, 12 novembre 2019. mwa4mURL consultato il 29 gennaio 2021.

cite-note-1010. ↑ mwa4cmwa4gmwa4kFonts – SVG 1.1 (Second Edition), su mwa4ow3.org. mwa4sURL consultato il 19 gennaio 2021.

cite-note-1111. ↑ mwa48(mwa5amwa5eEN) mwa5imwa5mWhen to Use SVG vs. When to Use Canvas, su mwa5qCSS-Tricks, 12 novembre 2019. mwa5uURL consultato il 19 gennaio 2021.

cite-note-1212. ↑ mwa5kmwa5omwa5sseo - Do search engines index text contained in SVG elements?, su mwa5wWebmasters Stack Exchange. mwa50URL consultato il 19 gennaio 2021.

cite-note-1313. ↑ mwa6emwa6imwa6mLinking – SVG 1.1 (Second Edition), su mwa6qw3.org. mwa6uURL consultato il 19 gennaio 2021.

cite-note-1414. ↑ mwa6kmwa6omwa6sFlash & The Future of Interactive Content | Adobe Blog, su mwa6wtheblog.adobe.com. mwa60URL consultato il 28 gennaio 2021 mwa64(archiviato dall'mwa68url originale il 2 dicembre 2017).

cite-note-1515. ↑ mwa7m(mwa7qmwa7uEN) mwa7ymwa7cAnimating SVG with CSS, su mwa7gCSS-Tricks, 17 aprile 2014. mwa7kURL consultato il 28 gennaio 2021.

cite-note-1616. ↑ mwa70(mwa74mwa78EN) Paul Festa, mwa8amwa8eW3C releases scripting standard, caveat, su mwa8iCNET. mwa8mURL consultato il 19 gennaio 2021.

cite-note-1717. ↑ mwa8cmwa8gmwa8k- SVG: Scalable Vector Graphics | MDN, su mwa8odeveloper.mozilla.org. mwa8sURL consultato il 19 gennaio 2021.

• citerefeisenberg(EN) J. David Eisenberg e Amelia Bellamy-Royds, SVG Essentials, 2ª ed., O'Reilly Media, 2014, ISBN 9781449374358.

• mwa9iGrafica computerizzata

• mwa9qGXL

• mwa9yXML

• mwa9gShockWave Flash

Altri progetti

• Wikimedia Commons

• Wikimedia Commons contiene immagini o altri file sullo Scalable Vector Graphics

• (EN) Sito ufficiale, su w3.org.

• citerefbritannica-com(EN) scalable vector graphics, su Enciclopedia Britannica, Encyclopædia Britannica, Inc.

• Repository sorgenti di Scalable Vector Graphics, su github.com.

• citereffoldoc(EN) Denis Howe, Scalable Vector Graphics, in Free On-line Dictionary of Computing. Disponibile con licenza mwa98GFDL

• mwa-ePagina ufficiale su SVG del W3C, su w3.org.

• mwa-mSVG Tutorial by Altsoft, su alt-soft.com.

• mwa-uGuida SVG - HTML.it Imparare ad utilizzare lo standard SVG. costruire di immagini, barre di navigazione e gli elementi grafici tipici di una pagina Web

• mwa-cVisualizzatore gratis on-line, su sharecad.org.